<template>
    <div class="Charge">

        <div class="charge-container">
             <el-table
                :data="vipProductList"
                border
                style="width: 100%">

                <el-table-column
                    prop="imageUrl"
                    label="产品图片"
                    width="100">
                    <!-- //!插槽作用域 -->
                    <template v-slot='{row}'>
                       
                       <img :src="row.imageUrl" alt="" style="width: 70px;">
                    </template>
                </el-table-column>

                <el-table-column
                    prop="productName"
                    label="产品名称"
                    width="180">
                </el-table-column>

                <el-table-column
                    prop="description"
                    label="产品描述" > 
                </el-table-column>

                <el-table-column
                    prop="price"
                    label="价格">
                </el-table-column>

                <el-table-column
                    prop="inventory"
                    label="库存">
                </el-table-column>

                <el-table-column
                    prop
                    label="操作">
                    <template v-slot={row}>
                        <el-button type="success" @click="charge(row)" icon='iconfont icon-vip3'>
                            <!-- <i class="iconfont icon-vip3"></i> -->
                            充值
                        </el-button>
                    </template>
                </el-table-column>
                
            </el-table>
        </div>
        
         

    </div>
</template>


<script>
    import * as api from '@/api/pay'
    import storage from '@/utils/storage'
  export default {

    meta:{
        title:"vipCharge",
        name:'vip充值',
        icon:'iconfont icon-chongzhi',
    },

    data() {
        return {
             vipProductList: []
        }
    },
    methods:{
        charge(row){
            // console.log('点击',row);
            this.$confirm(`您正在购买${row.productName}服务，是否确认？${row.description}`, '提示', {
                
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'success'
            })
            .then(()=>{
                ////跳转预支付页面
                this.$router.push({path:'/preorder'})
                ////存储你点击的那个商品的数据
                storage.set('product',row)
            })
            .catch(() => {
                this.$message({
                type: 'warning',
                message: '已取消充值'
                });          
            })
        }
    },
    async mounted(){
        ////获取商品信息
        let res = await api.getVipProduct()

        this.vipProductList = res.data.data
    }
    
  }
</script>

<style lang='less' scoped>    
    .charge-container{
        margin-top: 30px;
        
        /deep/.el-table__header-wrapper{
        
            text-align: center !important;
            line-height: 40px;
            text-align: center;
            /deep/.cell{
                text-align: center;
                .el-button{
                    width: 65px;
                    height: 25px;
                    padding-left: 10px;
                    padding-top:5px;
                }
            }   
        }
        .vip3{
            width: 70px;
            height: 30px;
        }
    }
    /deep/.el-table{
        text-align: center;
        .el-table__cell{
            text-align: center;
        }
    }
</style>